<template>
  <div class="w-50px center~ text-light-50 p-2px box-border rounded cursor-pointer"
       :class="[GRADE_STYLE[grade]]">
    {{ grade }}
  </div>
</template>

<script setup lang="ts">
import {toRefs} from "vue";

interface Props {
  grade: string
}

const GRADE_STYLE = {
  normal: "bg-green-600",
  middle: "bg-orange-600",
  high: "bg-red-600"
}

const rawProps = defineProps<Props>()
const {grade} = toRefs(rawProps)
</script>

<style scoped>
</style>